<template>
    <div
        class="container"
        style="background: #ebeffa; height: 100%;overflow:auto;"
    >
        <el-form
            v-loading="loading"
            :disabled="window"
            class="query-form query-form-2"
            ref="basicForm"
            :rules="rules"
            :model="basicForm"
            label-width="100px"
        >
            <p class="f-17 m-20">基本信息</p>
            <el-row :gutter="20">
                <el-col :span="8">
                    <el-form-item label="房间名称" prop="roomName">
                        <el-input v-model="basicForm.roomName"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="房源资产编码" label-width="120px" prop="housingAssetsCode">
                        <el-input
                            v-model="basicForm.housingAssetsCode"
                        ></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="房间房号" prop="houseNumber">
                        <el-input v-model="basicForm.houseNumber"></el-input>
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="所属楼宇" prop="fkBuildingId">
                        <el-select
                            v-model="basicForm.fkBuildingId"
                            @change="buildingChange"
                        >
                            <el-option
                                v-for="item in building"
                                :label="item.buildingName"
                                :value="item.pkBuildingId"
                                :key="item.pkBuildingId"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="所属区域">
                        <el-input
                            :value="areaName"
                            disabled="disabled"
                        ></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="所属楼层" prop="fkFloorId">
                        <el-select v-model="basicForm.fkFloorId">
                            <el-option
                                v-for="item in floor"
                                :value="item"
                                :key="item"
                                :label="item + '楼'"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="单元编码" prop="unitCoding">
                        <el-input v-model="basicForm.unitCoding"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="房间用途" prop="fkRoomPurpose">
                        <el-select v-model="basicForm.fkRoomPurpose">
                            <el-option
                                v-for="item in roomUse"
                                :key="item.pkBasicdataId"
                                :value="item.pkBasicdataId"
                                :label="item.itemName"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="水费编码">
                        <el-input v-model="basicForm.waterCostCode"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="8">
                    <el-form-item label="热水费编码">
                        <el-input v-model="basicForm.hotWaterCostCode"></el-input>
                    </el-form-item>
                </el-col>       
                <el-col :span="8">
                    <el-form-item label="电费编码">
                        <el-input
                            v-model="basicForm.electricCostCode"
                        ></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="气费编码">
                        <el-input
                            v-model="basicForm.coalGasCostCode"
                        ></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="8">
                    <el-form-item
                        prop="coefficientName"
                        label="水电煤系数模板"
                        label-width="140px"
                    >
                        <el-input disabled v-model="basicForm.coefficientName">
                            <template v-if="!window" slot="suffix">
                                <p
                                    class="suffix-p"
                                    @click="toTemplate('/coefficient/list')"
                                >
                                    选择
                                </p>
                            </template>
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="税率模板" prop="taxRateTemplateName">
                        <el-input
                            disabled
                            v-model="basicForm.taxRateTemplateName"
                        >
                            <template v-if="!window" slot="suffix">
                                <p
                                    class="suffix-p"
                                    @click="toTemplate('/taxrate/list')"
                                >
                                    选择
                                </p>
                            </template>
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="是否委托" prop="entrust">
                        <el-select v-model="basicForm.entrust">
                            <el-option :value="0" label="未委托"></el-option>
                            <el-option :value="1" label="委托"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8" v-if="basicForm.entrust == '1'">
                    <el-form-item label="委托说明">
                        <el-input v-model="basicForm.entrustExplain"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="24">
                    <el-form-item label="房源图片" prop="roomPicture">
                        <up-img
                            ref="upImg"
                            v-model="basicForm.roomPicture"
                            imgWidth="150px"
                            imgHeight="100px"
                            :imgLength="window ? 0 : 7"
                            :close="!window"
                        ></up-img>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <div class="div-table" style="padding:0 20px">
            <p class="f-17 m-20">换表记录</p>            
        <el-scrollbar style="height:100%;">
            <el-table
                ref="multipleTable"
                class="roomTable"
                :data="deviceChanges"
                style="width: 100%"
            >
                <el-table-column type="index" label="序号" width="40"></el-table-column>
                <el-table-column prop="creationDate" label="换表日期"></el-table-column>
                <el-table-column prop="oldWaterReading" label="老水表读数"></el-table-column>
                <el-table-column prop="newWaterReading" label="新水表读数"></el-table-column>
                <el-table-column prop="oldHotWaterReading" label="老热水表读数"></el-table-column>
                <el-table-column prop="newHotWaterReading" label="新热水表读数"></el-table-column>
                <el-table-column prop="oldElectricReading" label="老电表读数"></el-table-column>
                <el-table-column prop="newElectricReading" label="新电表读数"></el-table-column>
                <el-table-column prop="oldGasReading" label="老气表读数"></el-table-column>
                <el-table-column prop="newGasReading" label="新气表读数"></el-table-column>
            </el-table>
        </el-scrollbar>
    </div>
        <door-model-list
            v-model="basicForm.fkHouseTypeId"
            ref="doorList"
            type="roomEdit"
            :doorModel="doorModel"
            :supportingFacilities="supportingFacilities"
            :roomType="roomType"
            :facing="facing"
        ></door-model-list>
        <div v-if="roomState === 1">
            <el-form
                style="padding: 0 0.3rem"
                ref="rentForm"
                :rules="rules"
                :model="rentForm"
                label-width="100px"
            >
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="招租联系人" prop="rentalContact">
                            <el-input
                                v-model="rentForm.rentalContact"
                            ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="手机号" prop="contactInformation">
                            <el-input
                                v-model="rentForm.contactInformation"
                            ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="月租金" prop="roomRent">
                            <el-input v-model="rentForm.roomRent"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </div>
        <!-- 不是详情的 -->
        <div
            v-if="!(roomState === 0)"
            style="
                height: 0.7rem;
                display: flex;
                align-items: center;
                justify-content: center;
                width: 3rem;
                margin-left: calc(50% - 1.5rem);
            "
        >
            <el-button type="primary" @click="submitForm" :loading="hasSubmit"
                >确认</el-button
            >
            <el-button @click="close">取消</el-button>
        </div>
        <!-- 详情 === 0 -->
        <div
            v-else
            style="
                height: 0.7rem;
                display: flex;
                align-items: center;
                justify-content: center;
                width: 3rem;
                bottom: 0rem;
                margin-left: calc(50% - 1.5rem);
            "
        >
            <el-button @click="close">返回</el-button>
        </div>
    </div>
</template>

<script>
import { Loading } from 'element-ui'
import upImg from '@/components/upImg'
import doorModelList from '@/components/doorModelList'
import { getHouseTypeByBuildingId } from '@/api/house/type/type.js'
import { selectNameToId, getOneAll } from '@/api/common/common.js'
import { getBuildingName } from '@/api/house/building/building.js'
import {
    addRoom,
    updateRoom,
    updateByRent,
    getRoomById,
    getDeviceChangesByRoomId_CurrentMonth
} from '@/api/house/room/room.js'
export default {
    props: {
        window: {
            type: Boolean,
            default: false
        },
        roomId: {
            type: Number
        },
        roomState: {
            type: Number
        }
    },
    components: {
        upImg,
        doorModelList
    },
    computed: {
        areaName: function () {
            let buildingObj = this.building.filter((v) => {
                return v.pkBuildingId === this.basicForm.fkBuildingId
            })[0]
            if (buildingObj) {
                let areaObj = this.area.filter((v) => {
                    return buildingObj.areaNumberId === v.pkBasicdataId
                })[0]
                return areaObj && areaObj.itemName
            }
        },
        floor: function () {
            let buildingObj = this.building.filter((v) => {
                return v.pkBuildingId === this.basicForm.fkBuildingId
            })[0]
            if (buildingObj) {
                return buildingObj.totalFloor
            } else return 0
        }
    },
    data() {
        return {
            hasSubmit: false,
            isUpdate: false,
            radio: null,
            loading:false,
            pageObj: {
                page: 1,
                pageSize: 10,
                total: 0
            },
            building: [],
            basicForm: {
                fkHouseTypeId: undefined,
                roomPicture: ''
            },
            rentForm: {},
            doorModel: [],
            provinces: [],
            facing: [],
            roomType: [],
            roomUse: [],
            citys: [],
            area: [],
            supportingFacilities: [],
            deviceChanges:[],
            rules: {
                entrust: [
                    {
                        required: true,
                        message: '请选择是否委托'
                    }
                ],
                roomRent: [
                    {
                        required: true,
                        message: '请输入月租金',
                        trigger: 'blur'
                    }
                ],
                taxRateTemplateName: [
                    {
                        required: true,
                        message: '请选择税率模板'
                    }
                ],
                coefficientName: [
                    {
                        required: true,
                        message: '请选择水电煤系数模板'
                    }
                ],
                rentalContact: [
                    {
                        required: true,
                        message: '请输入出租人',
                        trigger: 'blur'
                    }
                ],
                contactInformation: [
                    {
                        required: true,
                        message: '请输入联系方式',
                        trigger: 'blur'
                    }
                ],
                fkRoomPurpose: [
                    {
                        required: true,
                        message: '请选择房间用途'
                    }
                ],
                unitCoding: [
                    {
                        required: true,
                        message: '请输入单元编码'
                    }
                ],
                fkFloorId: [
                    {
                        required: true,
                        message: '请选择'
                    }
                ],
                fkBuildingId: [
                    {
                        required: true,
                        message: '请选择'
                    }
                ],
                roomName: [
                    {
                        required: true,
                        message: '请选择'
                    }
                ],
                housingAssetsCode: [
                    {
                        required: true,
                        message: '请选择'
                    }
                ],
                houseNumber: [
                    {
                        required: true,
                        message: '请选择'
                    }
                ]
            }
        }
    },
    methods: {
        loadData(v) {
            this.loading = true;
            getHouseTypeByBuildingId(v).then((result) => {
                let { data, total } = result
                if (this.window) {
                    this.doorModel = data.filter((v) => {
                        return v.pkHouseTypeId === this.basicForm.fkHouseTypeId
                    })
                } else {
                    this.doorModel = data
                }
            }).finally((_) => {
                this.loading = false;
            })
        },
        toTemplate(url) {
            let time = new Date().getTime()
            localStorage.setExpire(
                time,
                JSON.stringify(this.basicForm),
                24 * 60 * 1000
            )
            this.$router.push({ path: url, query: { time: time } })
        },
        buildingChange() {
            //根据楼宇ID查询全部房间
            this.loadData(this.basicForm.fkBuildingId)
            let buildingObj = this.building.filter((v) => {
                return v.pkBuildingId === this.basicForm.fkBuildingId
            })[0]
            if (buildingObj) {
                this.basicForm.areaNumberId = this.buildingObj.areaNumberId
            }
        },
        submitForm() {
            //招租窗口时 reLoad
            if (this.window && this.roomState === 1) {
                this.$refs['rentForm'].validate((valid) => {
                    if (valid) {
                        this.hasSubmit = true;
                        this.rentForm.pkRoomId = this.roomId;
                        this.rentForm.rentalStatus = '1';
                        updateByRent(this.rentForm).then((res) => {
                            if (res.code === 10000) {
                                this.$message.success(res.msg);
                                this.close();
                                this.$emit('reLoad'); //父组件刷新
                            }
                        }).finally((_) => {
                            this.hasSubmit = false;
                        })
                    }
                })
                return
            }
            this.$refs['basicForm'].validate((valid) => {
                if (valid) {
                    if (!this.basicForm.fkHouseTypeId) {
                        this.$message.warning('请选择户型')
                        return
                    }
                    let selectDoorItData = this.doorModel.filter(v => {
                        return v.pkHouseTypeId === this.basicForm.fkHouseTypeId
                    });
                    if (!selectDoorItData.length) {
                        this.$message.warning("请选中当前楼宇所有户型");
                        return;
                    }
                    this.hasSubmit = true
                    this.$refs.upImg.submit().then((res) => {
                        if (!this.isUpdate) {
                            addRoom(this.basicForm).then((result) => {
                                if (result.code === 10000) {
                                    this.$message.success(result.msg)
                                    this.close()
                                }
                            }).finally((_) => {
                                this.hasSubmit = false
                            })
                        } else {
                            updateRoom(this.basicForm).then((result) => {
                                if (result.code === 10000) {
                                    this.$message.success(result.msg)
                                    this.close()
                                }
                            }).finally((_) => {
                                this.hasSubmit = false
                            })
                        }
                    })
                }
            })
        },
        close() {
            if (this.window === false) {
                this.$router.push('/room/list')
                //let rex = this.$route.matched[this.$route.matched.length - 1].regex;
                //this.$store.commit("delTabs", rex);
            } else {
                this.$store.commit('changeWindow', {
                    name: 'roomEditWindow',
                    val: false
                })
            }
        },
        Init() {
            if (this.$route.query.id) {
                this.isUpdate = true
                getRoomById(this.$route.query.id).then((result) => {
                    this.basicForm = result.data
                    this.buildingChange()
                })
                getDeviceChangesByRoomId_CurrentMonth(this.$route.query.id,"false").then((result) => {
                        this.deviceChanges = result.data                        
                        console.log("==="+this.deviceChanges)
                })            
            } else if (this.window) {
                if (this.roomId) {
                    this.isUpdate = true
                    getRoomById(this.roomId).then((result) => {
                        this.basicForm = result.data
                        this.rentForm = result.data
                        this.buildingChange()
                    })
                    getDeviceChangesByRoomId_CurrentMonth(this.roomId,"false").then((result) => {
                        this.deviceChanges = result.data                        
                        console.log("==="+this.deviceChanges)
                    })
                } else {
                    this.$message.warning('未找到相应的房间')
                }
            } else if (this.$route.query.time) {
                let query = this.$route.query
                if (!localStorage.getItem(query.time)) return
                this.basicForm = JSON.parse(localStorage.getExpire(query.time))
                if (this.basicForm.pkRoomId) {
                    this.isUpdate = true
                }
                this.buildingChange()
                if (query.TaxRateTemplateId) {
                    this.basicForm.fkTaxRateTemplateId = query.TaxRateTemplateId
                    this.basicForm.taxRateTemplateName = query.TaxRateTemplateName
                }
                if (query.CoefficientTemplateId) {
                    this.basicForm.fkCoefficientTemplateId = query.CoefficientTemplateId
                    this.basicForm.coefficientName = query.CoefficientName
                }
                localStorage.removeItem(this.$route.query.time)
            }
            getOneAll(selectNameToId('area')).then((res) => {
                this.area = res.data
            })
            getOneAll(selectNameToId('supportingFacilities')).then((res) => {
                this.supportingFacilities = res.data
            })
            getOneAll(selectNameToId('roomUse')).then((res) => {
                this.roomUse = res.data
            })
            getOneAll(selectNameToId('facing')).then((res) => {
                this.facing = res.data
            })
            getOneAll(selectNameToId('roomType')).then((res) => {
                this.roomType = res.data
            })
            getBuildingName().then((result) => {
                this.building = result.data
            })
        }
    },
    mounted() {
        this.Init();
    }
}
</script>

<style scoped>
.suffix-p {
    background-color: #4391fb;
    width: 100%;
    height: 100%;
    color: white;
    padding: 0px 5px;
    border-radius: 5px;
    cursor: pointer;
    display: block;
}

.query-form-2 {
    height: 380px !important;
}

.div-table {
    height: calc(100% - 380px - 1rem);
}

.query-form{
    position: inherit;
}

.query-form .el-col {
    margin: 7px 0;
}
</style>
